<template>
  <view class="userinfo">
    <!-- 假设点击以下项时，触发表单弹出 -->
    <view class="item" @click="showForm = true">
      <text>点击修改信息</text>
    </view>

    <!-- 表单，只有当 showForm 为 true 时才显示 -->
    <view class="form-container" v-if="showForm">
      <input type="text" v-model="formData.name" placeholder="姓名" />
      <input type="text" v-model="formData.age" placeholder="年龄" />
      <!-- 其他需要的表单元素 -->
      <button @click="submitForm">提交</button>
      <button @click="showForm = false">取消</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showForm: false, // 控制表单显示的变量
      formData: { // 表单数据对象
        name: '',
        age: ''
        // 其他字段...
      }
    };
  },
  methods: {
    submitForm() {
      // 这里发送请求到后端提交表单数据
      // 例如使用 axios
      axios.post('/api/submit-form', this.formData)
        .then(response => {
          // 处理响应...
          console.log('Form submitted successfully');
          this.showForm = false; // 提交后隐藏表单
        })
        .catch(error => {
          // 处理错误...
          console.error('Error submitting form', error);
        });
    }
  }
};
</script>

<style>
  .form-container {
    /* 表单的样式 */
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 10;
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    /* 其他您需要的样式 */
  }

  /* 其他样式... */
</style>